<template>
    <el-upload
        class="upload-demo"
        active="D:/wp/uploadPath/"
        :http-request="httpRequest"
        :before-upload="beforeUpload"
        :before-remove="beforeRemove"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-remove="handleRemove"
        list-type="picture"
        drag
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg，且壁纸不超过【20MB】</div>
    </el-upload>
</template>
<script setup>
import {ElMessage} from "element-plus";
const activePath = ref();

// 图片预处理
function beforeUpload(file){
  console.info("beforeUpload");

  /**
   * 图片上传前预处理，主要验证图片 格式、 大小
   * 大小不可超 20M，单位为字节（B），file.size 获取的单位为 B ，20M 换成 B 为 20971520B
   * 格式为 jpg， jpeg， png
   */
      // 图片大小
  let wpsize = file.size.toFixed(2);
  if (wpsize > 20971520) {
    // console.info("图片大小超过 20M ，请调整后重新上传")
    handleError("图片大小超过 20M ，请调整后重新上传");
  }
  // 验证图片格式
  if (file.type.indexOf("image/") == -1){
    handleError("图片格式不是 “png”、“jpg”、“jpeg”格式 ，请调整后重新上传");
    handleRemove(file);
  }{
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      console.info(reader)
      options.img = reader.result;
      options.filename = file.name;
    };
  }
  // console.info(img);
  // const img = new Image();
  // img.src = file.name;
  //
  //
  // img.src = "https://haowallpaper.com/link/common/file/getCroppingImg/16449394311089536";
  // img.onload = () => {
  //   const canvas = this.$refs.canvas;
  //   const ctx = canvas.getContext('2d');
  //   canvas.width = img.width; // 设置canvas宽度为图片宽度
  //   canvas.height = img.height; // 设置canvas高度为图片高度
  //   ctx.drawImage(img, 0, 0); // 将图片绘制到canvas上
  //   console.log(img.width, img.height); // 获取图片尺寸
  // };
  //
  //
  // console.info(img.width, img.height);
  // console.info(file);
}

function beforeRemove(){
  console.info("beforeRemove");
}

function handleSuccess(response, file, fileList) {
  console.log('上传成功', response);
}

// 上传失败
function handleError(err) {
  console.error('handleError--->');
  // console.error('上传失败', err);
  ElMessage({ message: err, type: 'error' });
}

// 移除图片
function handleRemove(file) {
    console.log("handleRemove");
}
// 预览图片
function handlePreview(file) {
      console.info("handlePreview", file);
}

// 上传图片
function handleUpload(data){
  console.info("handleUpload", data);
  handleUploadWp().then(res => {
    console.info(res)
  })
}

// 覆盖默认上传行为
function httpRequest(){
  console.info("覆盖默认上传行为--httpRequest");
}

</script>